<template>
  <div>
  <j-modal
    :title="title"
    :width="800"
    :fullscreen.sync="fullscreen"
    :visible="visible"
    :maskClosable="false"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <div style="text-align:center;">
        <a-popconfirm v-has="'XyParkFollowUpList:delete'" title="确定删除吗?" @confirm="() => handleDel()">
          <a-button type="danger" ghost>删除</a-button>
        </a-popconfirm>
        <a-button @click="handleEdit" v-has="'XyParkFollowUpList:update'" type="primary">编辑</a-button>
        <a-button @click="handleAdd" type="primary" v-has="'XyParkFollowUpList:add'">添加跟进记录</a-button>
      </div>
    </template>
      <a-timeline v-if="dataSource.length>0">
        <template v-for="(item,i) in dataSource">
          <a-timeline-item :key="i">
            <span slot="dot">
              <a-icon type="phone" v-if="item.communicate_type === '0'" :style="{color:active ===i?'#07c160':'#1890FF','font-size': '16px'}" />
              <a-icon type="wechat" v-if="item.communicate_type === '1'" :style="{color:active ===i?'#07c160':'#1890FF','font-size': '16px'}" />
              <a-icon type="user" v-if="item.communicate_type === '2'" :style="{color:active ===i?'#07c160':'#1890FF','font-size': '16px'}" />
            </span>
            <h3>{{moment(item.followup_date).format('YYYY-MM-DD')}}</h3>
            <a-card @click="handleSelect(i,item)" class="timeline-card" :class="active ===i?'active':''" :bodyStyle="bodyStyle">
              <a-row type="flex" align="middle">
                <a-col :span="4" class="timeline-card-left">
                  <h2 >{{filterDictTextByCache('communicate_type',item.communicate_type)}}</h2>
                  <p>接触</p>
                </a-col>
                <a-col :span="19"  class="timeline-card-right">
                  <a-row type="flex" :gutter="[12,12]" justify="space-between">
                    <a-col span="12">
                      <a-avatar size="small" style="color: #f56a00; backgroundColor: #fde3cf">{{filterDictText(dictOptions.create_by,item.create_by) |createByOne}}</a-avatar>
                      <span class="timeline-card-name">{{filterDictText(dictOptions.create_by,item.create_by)}}</span>
                    </a-col>
                    <a-col span="12">
                      跟进日期:{{moment(item.followup_date).format('YYYY-MM-DD')}}
                    </a-col>
                    <a-col span="8">
                      进程:{{filterDictTextByCache('customer_process',item.followup)}}
                    </a-col>
                    <a-col span="8">客户意向等级：{{filterDictTextByCache('park_intention_level',item.customer_intention)}}</a-col>
                    <a-col span="8">客户联系人：{{item.customer_contacts}}</a-col>
                    <a-col span="12">客户: {{item.customer_name}}</a-col>
                    <a-col span="12">计划下次跟进时间: {{moment(item.plan_followup_date).format('YYYY-MM-DD')}}</a-col>
                    <a-col span="24">
                      <span>跟进说明：</span>{{item.remarks}}
                    </a-col>

                  </a-row>
                </a-col>
              </a-row>
            </a-card>
          </a-timeline-item>
        </template>
      </a-timeline>
    <a-empty description="暂无跟进记录" v-else />
  </j-modal>
  <XyParkFollowUpModal ref="XyParkFollowUpModal" @ok="hanedleOk" />
  </div>
</template>

<script>
import XyParkFollowUpModal from './XyParkFollowUpModal'
import { getAction, deleteAction } from '@/api/manage'
import { filterDictTextByCache, filterDictText } from '@/components/dict/JDictSelectUtil'
import moment from 'moment'
export default {
  name: 'XyParkFollowUpListModal',
  components: {
    XyParkFollowUpModal
  },
  data() {
    return {
      title: '客户跟进记录',
      width: '80%',
      visible: false,
      disableSubmit: false,
      fullscreen: true,
      dataSource: [],
      bodyStyle: {
        padding: '10px 15px'
      },
      active: '',
      activeData: {},
      url: {
        list: '/online/cgform/api/getData/fd4c6471a4b6440baa1626a64b59fe70',
        delete: '/online/cgform/api/form/fd4c6471a4b6440baa1626a64b59fe70',
        columns: 'online/cgform/api/getColumns/fd4c6471a4b6440baa1626a64b59fe70'
      },
      dictOptions: [],
      currentData: {}

    }
  },
  filters: {
    createByOne(value) {
      return value ? value.slice(0, 1) : ''
    }
  },
  created() {
    this.getColumns()
  },
  methods: {
    filterDictTextByCache,
    filterDictText,
    moment,
    getColumns() {
      getAction(this.url.columns).then(res => {
        if (res.success) {
          this.dictOptions = res.result.dictOptions
        } else {
          this.$message.error(res.message)
        }
      })
    },
    loadData() {
      getAction(this.url.list, {
        customer_code: this.customerCode,
        pageNo: 1,
        pageSize: 9999,
        column: 'followup_date',
        order: 'desc'
      }).then(res => {
        if (res.success) {
          this.dataSource = res.result.records
        }
      })
    },
    show(data) {
      this.visible = true
      this.customerCode = data.customerCode
      this.currentData = data
      this.loadData()
    },
    close() {
      this.$emit('close')
      this.active = ''
      this.activeData = {}
      this.visible = false
    },
    handleOk() {
      this.$refs.realForm.handleOk()
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
      this.$emit('ok')
    },
    handleEdit() {
      if (this.active === '' || this.active === null || this.active === undefined) {
        this.$message.warning('请先选择跟进记录')
        return false
      }
      this.$refs.XyParkFollowUpModal.edit(this.activeData, this.currentData)
    },
    handleAdd() {
      this.$refs.XyParkFollowUpModal.add(this.currentData)
    },
    handleSelect(i, data) {
      this.active = i
      this.activeData = data
    },
    handleDel() {
      if (this.active === '' || this.active === null || this.active === undefined) {
        this.$message.warning('请先选择跟进记录')
        return false
      }
      deleteAction(this.url.delete + '/' + this.activeData.id).then(res => {
        if (res.success) {
          this.loadData()
          this.active = ''
          this.activeData = {}
        } else {
          this.$message.warning(res.$message)
        }
      })
    },
    hanedleOk() {
      this.loadData()
    }
  }
}
</script>

<style scoped>
.timeline-card{
  box-shadow: #e5e5e5 1px 5px 10px 3px;
  width:800px;
}
.timeline-card-right{
  border-left: 1px solid rgb(229 229 229);
  padding-left: 20px;
}
.timeline-card-name{
  font-size:14px;
  font-weight: 700;
  margin-left:10px;
}
.timeline-card-left>h2,.timeline-card-left>p{
  text-align: center;
}
.active {
  border: 2px #07c160 solid;
}
</style>
